<template>
  <div class="box_list">
    <!-- 路径面包屑区域 -->
    <el-breadcrumb class="mb15">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 工作区域 -->
    <div class="box_content">
      <el-card>
        <el-table :data="rightsData" border stripe>
          <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
          <el-table-column label="权限名称" prop="authName"></el-table-column>
          <el-table-column label="路径" prop="path"></el-table-column>
          <el-table-column label="权限等级" prop="level">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.level==0" size="small">一级权限</el-tag>
              <el-tag v-else-if="scope.row.level==1" type="success" size="small">二级权限</el-tag>
              <el-tag v-else type="warning" size="small">三级权限</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rightsData: [],
    };
  },
  created() {
    this.getrightsList();
  },
  methods: {
    getrightsList() {
      this.$axios
        .get("rights/list")
        .then((res) => {
          if(res.data.meta.status==200){
            this.$message.success("获取权限列表成功");
            this.rightsData = res.data.data;
          }else{
            this.$message.error("获取权限列表失败");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
</style>